I have a bug with same error message, but all the libraries use react18. I'll describe an architecture and here is a link to an example. Can you take a look, does it relative to the issue?

Arch

So, I have react18, webpack5, umd. There are several projects that linked together as local delendencies.

I link projects using /dist folder. I'm not really sure about it, but I decided to use small exports instead of linking to /src to save hard drive space.

I'm not really sure how webpack-es6 tree-shaking works, but I decided to create a bundle per source file instead of creating bundle per project. Just, well, it seems that webpack will understand it, probably. So, there is no /dist/index.js file, but a lot of /dist/**/*.(js|d.ts) files to import.

Projects

1. webpack - build-only utilites, builds as webpack.target = 'node', but I don't think they affect runtime.
2. common-react - a library with react-specific functions and components. Builds as webpack.target = 'web'
3. application - a library that renders react <App /> component. Depends on common-react, builds as webpack.target = 'web'

If you make a change in a project, be sure to build the project using yarn build and run yarn upd in target to install the new version.

Run

./bootstrap.sh # it will initialize and build all the projects
cd application
yarn start

Error

There's a react hook. When the hook imports from /application folder, it works fine. But when I import it from @snowinmars/common-react project, it fails with useObserver.ts?0fc0:122 Uncaught TypeError: Cannot read properties of null (reading 'useState')

1. If I add externals: {react: 'react'} to /common-react/webpack.config.js, hook works. But it's a hack.
2. There was a build misconfiguration, when /common-react/dist/hooks/useRequest.js bundled to 430Kb file due to it was binded with whole react. Now it doesn't - all exported files are pretty small.

So...here we are. If you need any further details - just ask)

I too getting similar error, when I'm pointing my local library in react application.

"devDependencies": {
"@emerald/reactmaterial": "file:../emerald.reactmaterial/dist/emerald/reactmaterial",
}

If Im install it from server, it works fine.

This problem also occurred to me, stops package development completely. Need help!

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

hi! @rollsover Thank you for your method！But if delete a node_modules it will not be possible to continue development, can you tell me how you do it?

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

hi! @rollsover Thank you for your method！But if delete a node_modules it will not be possible to continue development, can you tell me how you do it?

To get rid of npm link you can also run something like npm uninstall library-name && npm install library-name --save before some release command , which will uninstall and install w/o any redundant node_modules inside the library-name package

Thanks for this @Kiran554 was driving me mad.

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

The workaround for me is to remove dependencies in the the package.json using prepack script and pack the library with npm pack and then install the output library-<version>.tgz file in the target project by npm install library-<version>.tgz

I could finally solve this issue with @rollsover 's workaround. Thank you!

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

I am facing the same issue with my package. Please help.
I used only as simple as useState hooks in one place, and its showing the same error.
npm i @subhampanja/easycrm

I think this should be fixed if the corresponding dependencies set react as peer dependeny

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

The reason for this problem is that the react version in the project is inconsistent with the react version used in your package

If you use your package in a project and a certain version of react has been installed in the project. Then you install your package in this project, and a certain version of react is also installed in your package. Then you may get this error report

how to fix it?

You just need to put the react dependencies from your package into the peerDependencies

bad case

project

{
  "dependencies": {
    "react": "x.x.x",
    "react-dom": "x.x.x",
    "your package": "x.x.x"
  }
}

your package

{
  "dependencies": {
    "react": "x.x.x",
    "react-dom": "x.x.x"
  }
}

good case

project

{
  "dependencies": {
    "react": "x.x.x",
    "react-dom": "x.x.x",
    "your package": "x.x.x"
  }
}

your package

{
++  "peerDependencies": {
    "react": "x.x.x",
    "react-dom": "x.x.x"
  }
}

Maybe not right, but hopefully it will help you

https://nodejs.org/en/blog/npm/peer-dependencies/

@iDestin , in my example react and react-dom versions are equal, but it causes the bug.

Hi! For me this helped.
React have some new rules that causes the app to crash.

In my case it was
wrong way:
useEffect(async ()=>{})

good way:
useEffect(()=>{
async function fetchData() {}
fetchData()
})

Also with cleanup

wrong way:
BackHandler.addEventListener('hardwareBackPress', backAction);
**return BackHandler.**removeEventListener('hardwareBackPress');

good way:
BackHandler.addEventListener('hardwareBackPress', backAction);
return function cleanup() {
BackHandler.removeEventListener('hardwareBackPress');
};

Good luck!

THE SOLUTION OF THIS ISSUE IS THIS! :) -> https://iws.io/2022/invalid-hook-multiple-react-instances

THE SOLUTION OF THIS ISSUE IS THIS! :) -> https://iws.io/2022/invalid-hook-multiple-react-instances

This issue is about useObserver.ts?0fc0:122 Uncaught TypeError: Cannot read properties of null (reading 'useState') bug. The article does not describe a fix. So it's not a solution - it's just related.

Try npm uninstall library-name this command 1st and then npm install library-name --save. Hope this will work. <3

if the correspo

Didn't work for me.

add this to tsconfig.json in your project. (if not work, delete react and react-dom in your package node_modules)

add this to tsconfig.json in your project. (if not work, delete react and react-dom in your package node_modules)

This worked like a charm!

Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
at useState (http://localhost:3000/static/js/bundle.js:75196:25)
at Q (http://localhost:3000/static/js/bundle.js:82555:61)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:24955:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:28239:17)
at beginWork (http://localhost:3000/static/js/bundle.js:29535:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14551:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14595:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14652:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:34516:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:33764:16)

How to solve this issue!??

Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
at useState (http://localhost:3000/static/js/bundle.js:75196:25)
at Q (http://localhost:3000/static/js/bundle.js:82555:61)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:24955:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:28239:17)
at beginWork (http://localhost:3000/static/js/bundle.js:29535:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14551:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14595:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14652:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:34516:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:33764:16)

I am getting this problem often ,Intially the project was good but I am unable to understand how to solve this problem even after I have followed all the methods to solve this

any updates?

Cannot read properties of null (reading 'useState') TypeError: Cannot read properties of null (reading 'useState') at useState (http://localhost:3000/static/js/bundle.js:75196:25) at Q (http://localhost:3000/static/js/bundle.js:82555:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:24955:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:28239:17) at beginWork (http://localhost:3000/static/js/bundle.js:29535:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14551:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14595:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14652:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:34516:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:33764:16)

I am getting this problem often ,Intially the project was good but I am unable to understand how to solve this problem even after I have followed all the methods to solve this

I'm getting the same error. I was just trying to create various routes for my project. Tried a bunch of stuff but didn't work. It keeps saying: reading usestate. But uptill now I've not even used it yet.

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

hi! @rollsover Thank you for your method！But if delete a node_modules it will not be possible to continue development, can you tell me how you do it?

To get rid of npm link you can also run something like npm uninstall library-name && npm install library-name --save before some release command , which will uninstall and install w/o any redundant node_modules inside the library-name package

Can you elaborate a bit, or give a sample code please? I still didn't get that properly. :)

edit:
Just figured out that this was the problem with the current version i guess. So try uninstalling react, react-dom and react-router-dom and reinstall them with the version-18.2.0 for react and react-dom, 6.3.0 for react-router-dom. Then use the old elements. Hope it helps.

@haikyuu , could you push this bug to confirmed status based on my comment.

I was also facing the same issue with storybook. So I switched storybook bundler config from webpack to vite. This has resolved my issue

I've struggled with this issue all day and I tried everything here but nothing worked for me. At last, I solved it by updating webpack version from 5.36.2 to the latest 5.91.0.

I'm facing this issue too

I moved some dependencies to peerDependencies, which partially solved the issue. However, I'm still facing that issue in a monorepo.

My Project: https://github.com/bundlydev/motoko-nextjs-react-native/tree/fix-build

My Package: https://github.com/bundlydev/ares/tree/develop

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

The workaround for me is to remove dependencies in the the package.json using prepack script and pack the library with npm pack and then install the output library-<version>.tgz file in the target project by npm install library-<version>.tgz

This solves the error for me, but then I have to repeat this process of replacing the .tgz file after every change in the package, can somebody find more better solutions for this

Adding a react alias in webpack config works for me:

resolve: {
  alias: {
    react: path.resolve(process.cwd(), '../node_modules/react'),
  }
 }